<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>B站数据魔法阵</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: radial-gradient(circle, #0a1929 0%, #020c1a 100%);
            color: #e1f5fe;
            font-family: 'Segoe UI', 'Arial Rounded', sans-serif;
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
            position: relative;
        }

        /* 标题区域 */
        .header {
            position: relative;
            text-align: center;
            width: 100%;
            padding: 20px 0;
            z-index: 10;
        }

        .team-name {
            font-size: 3.5vmax;
            color: #4fc3f7;
            text-shadow: 0 0 15px rgba(79, 195, 247, 0.7);
            letter-spacing: 0.1em;
            margin-bottom: 0.5vmax;
        }

        .project-name {
            font-size: 1.8vmax;
            color: #e1f5fe;
            opacity: 0.9;
        }

        /* 魔法阵容器 */
        .magic-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 65vh;
            position: relative;
        }

        /* 魔法阵背景容器 */
        .magic-circle {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 65vmin;
            height: 65vmin;
            background:
                radial-gradient(circle, transparent 40%, rgba(30, 136, 229, 0.1) 100%),
                repeating-conic-gradient(
                    from 0deg,
                    transparent 0deg 15deg,
                    rgba(41, 182, 246, 0.1) 15deg 30deg
                );
            filter: drop-shadow(0 0 15px #1e88e5);
            animation: float 6s ease-in-out infinite, rotate 120s linear infinite;
            border-radius: 50%;
            border: 1px solid rgba(30, 136, 229, 0.3);
            box-shadow:
                0 0 60px rgba(30, 136, 229, 0.1),
                inset 0 0 100px rgba(30, 136, 229, 0.1);
            z-index: 2;
        }

        /* 魔法阵内部圆圈 */
        .magic-circle::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border-radius: 50%;
            border: 1px solid rgba(30, 136, 229, 0.2);
            box-shadow: inset 0 0 50px rgba(30, 136, 229, 0.1);
        }

        .magic-circle::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 20%;
            width: 60%;
            height: 60%;
            border-radius: 50%;
            border: 1px solid rgba(30, 136, 229, 0.2);
            box-shadow: inset 0 0 40px rgba(30, 136, 229, 0.1);
        }

        /* 中间动态核心 */
        .core {
            position: relative;
            width: 10vmin;
            height: 10vmin;
            background: radial-gradient(circle, #4fc3f7 0%, #1e88e5 70%, transparent 100%);
            border-radius: 50%;
            box-shadow: 0 0 40px #29b6f6;
            animation: pulse 3s ease-in-out infinite;
            z-index: 10;
        }

        /* 咒语按钮环 */
        .spell-ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: 5;
        }

        /* 符文按钮 */
        .rune {
            position: absolute;
            width: 18%;
            height: 18%;
            background: rgba(30, 136, 229, 0.2);
            backdrop-filter: blur(4px);
            border: 2px solid #1e88e5;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.4s ease;
            box-shadow: 0 0 10px rgba(41, 182, 246, 0.5);
            z-index: 4;
            transform: translate(-50%, -50%);
        }

        .rune:hover {
            transform: translate(-50%, -50%) scale(1.15);
            background: rgba(30, 136, 229, 0.4);
            box-shadow: 0 0 25px #29b6f6;
        }

        .rune-label {
            font-size: 1.2vmax;
            font-weight: 700;
            color: #fff59d;
            text-shadow: 0 0 8px rgba(255, 245, 157, 0.8);
        }

        .rune-icon {
            font-size: 2.5vmax;
            margin-bottom: 0.8vmin;
            text-shadow: 0 0 10px rgba(41, 182, 246, 0.8);
        }

        /* 中心操作按钮容器 - 不随转盘旋转 */
        .center-actions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            display: none;
            flex-direction: column;
            gap: 10px;
            background: rgba(2, 12, 26, 0.9);
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 0 20px rgba(30, 136, 229, 0.5);
            backdrop-filter: blur(10px);
            min-width: 180px;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            background: rgba(30, 136, 229, 0.3);
            border: 1px solid #1e88e5;
            border-radius: 25px;
            color: white;
            cursor: pointer;
            font-size: 1.1vmax;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .action-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(30, 136, 229, 0.5);
        }

        .action-btn.crawl {
            background: rgba(76,175,80,0.3);
            border: 1px solid #4CAF50;
        }
        .action-btn.crawl:hover {
            background: rgba(76,175,80,0.5);
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
        }

        .action-btn.visualize {
            background: rgba(156,39,176,0.3);
            border: 1px solid #9C27B0;
        }
        .action-btn.visualize:hover {
            background: rgba(156,39,176,0.5);
            box-shadow: 0 0 15px rgba(156, 39, 176, 0.5);
        }

        .action-btn .material-icons {
            font-size: 1.3em;
        }

        /* 粒子效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .particle {
            position: absolute;
            background: rgba(79, 195, 247, 0.7);
            border-radius: 50%;
            pointer-events: none;
            animation: float 8s ease-in-out infinite;
        }

        /* 底部说明 */
        .instructions {
            position: absolute;
            bottom: 20px;
            color: rgba(225, 245, 254, 0.7);
            font-size: 1.2vmax;
            text-align: center;
            width: 100%;
            z-index: 5;
        }

        /* 动画效果 */
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .magic-circle {
                width: 80vmin;
                height: 80vmin;
            }

            .rune {
                width: 20%;
                height: 20%;
            }

            .center-actions {
                min-width: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="team-name">用魔法打败BUG</h1>
        <div class="project-name">B站数据魔法秘典</div>
    </div>

    <div class="magic-container">
        <!-- 粒子背景 -->
        <div class="particles" id="particles"></div>

        <!-- 魔法阵 -->
        <div class="magic-circle">
            <div class="core"></div>
            <div class="spell-ring">
                <!-- 游戏区按钮 -->
                <div class="rune" data-name="game">
                    <span class="material-icons rune-icon">sports_esports</span>
                    <span class="rune-label">游戏区</span>
                </div>

                <!-- 舞蹈区按钮 -->
                <div class="rune" data-name="dance">
                    <span class="material-icons rune-icon">directions_run</span>
                    <span class="rune-label">舞蹈区</span>
                </div>

                <!-- 知识区按钮 -->
                <div class="rune" data-name="knowledge">
                    <span class="material-icons rune-icon">school</span>
                    <span class="rune-label">知识区</span>
                </div>

                <!-- 电影区按钮 -->
                <div class="rune" data-name="movie">
                    <span class="material-icons rune-icon">movie</span>
                    <span class="rune-label">电影区</span>
                </div>

                <!-- 短剧区按钮 -->
                <div class="rune" data-name="shortplay">
                    <span class="material-icons rune-icon">theater_comedy</span>
                    <span class="rune-label">短剧区</span>
                </div>
            </div>
        </div>

        <!-- 中心操作按钮 - 不随转盘旋转 -->
        <div class="center-actions" id="center-actions">
            <button class="action-btn crawl" id="crawl-btn">
                <span class="material-icons">bug_report</span>
                启动爬虫
            </button>
            <button class="action-btn visualize" id="visualize-btn">
                <span class="material-icons">visibility</span>
                可视化界面
            </button>
        </div>
    </div>

    <div class="instructions">
        点击魔法符文选择B站分区，启动爬虫或查看可视化分析
    </div>

    <script>
        let currentSpider = null;
        let fakeProgressInterval = null;

        // 创建粒子效果
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                // 随机属性
                const size = Math.random() * 5 + 1;
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                const delay = Math.random() * 5;
                const duration = Math.random() * 10 + 10;

                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                particle.style.opacity = Math.random() * 0.5 + 0.2;
                particle.style.animationDelay = `${delay}s`;
                particle.style.animationDuration = `${duration}s`;

                particlesContainer.appendChild(particle);
            }
        }

        // 五角星的五个顶点位置计算
        const calculateStarPoints = (width, height) => {
            const centerX = width / 2;
            const centerY = height / 2;
            const radius = Math.min(width, height) * 0.35;
            const points = [];
            const angleOffset = -Math.PI / 2; // 从顶部开始

            for (let i = 0; i < 5; i++) {
                const angle = (2 * Math.PI * i / 5) + angleOffset;
                points.push({
                    x: centerX + radius * Math.cos(angle),
                    y: centerY + radius * Math.sin(angle)
                });
            }

            return points;
        };

        // 设置按钮位置
        const setRunePositions = () => {
            const circle = document.querySelector('.magic-circle');
            const runes = document.querySelectorAll('.rune');
            const width = circle.offsetWidth;
            const height = circle.offsetHeight;

            const points = calculateStarPoints(width, height);

            runes.forEach((rune, index) => {
                if (index < points.length) {
                    const point = points[index];
                    rune.style.left = `${point.x}px`;
                    rune.style.top = `${point.y}px`;
                }
            });
        };

        // 添加波纹效果
        function addRippleEffect(event, element) {
            const existingRipples = element.querySelectorAll('.ripple');
            existingRipples.forEach(ripple => ripple.remove());

            const ripple = document.createElement('div');
            ripple.classList.add('ripple');

            const rect = element.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = event.clientX - rect.left - size/2;
            const y = event.clientY - rect.top - size/2;

            ripple.style.width = `${size}px`;
            ripple.style.height = `${size}px`;
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;

            element.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            setRunePositions();

            window.addEventListener('resize', setRunePositions);

            // 符文按钮点击事件
            document.querySelectorAll('.rune').forEach(button => {
                button.addEventListener('click', function(e) {
                    // 添加波纹效果
                    addRippleEffect(e, this);

                    const centerActions = document.getElementById('center-actions');

                    if (centerActions.style.display === 'flex') {
                        // 如果中心操作按钮已经显示，则隐藏它们
                        centerActions.style.display = 'none';
                        currentSpider = null;  // 重置当前爬虫类型
                        document.getElementById('crawl-btn').dataset.spider = '';  // 重置按钮数据属性
                        document.getElementById('visualize-btn').dataset.link = '';
                    } else {
                        // 如果中心操作按钮未显示，则按现有逻辑显示它们
                        centerActions.style.display = 'flex';
                        currentSpider = this.dataset.name;
                        document.getElementById('crawl-btn').dataset.spider = currentSpider;
                        document.getElementById('visualize-btn').dataset.link = `/${currentSpider}`;
                    }
                });
            });

            // 启动爬虫按钮事件
            document.getElementById('crawl-btn').addEventListener('click', function() {
                const spiderName = this.dataset.spider;
                currentSpider = spiderName;

                // 显示进度条
                const progressPanel = document.getElementById("magic-panel");
                const progressBar = document.getElementById("magic-bar");
                const statusText = document.getElementById("magic-status-text");

                progressPanel.style.display = "block";
                statusText.innerText = "正在施法中...";
                progressBar.style.width = "0%";

                let percent = 0;
                if (fakeProgressInterval) clearInterval(fakeProgressInterval);
                fakeProgressInterval = setInterval(() => {
                    if (percent < 95) {
                        percent += Math.random() * 3;
                        progressBar.style.width = percent + "%";
                    } else {
                        clearInterval(fakeProgressInterval);
                    }
                }, 500);

                // 启动爬虫请求
                fetch(`/api/start/${spiderName}`, { method: 'POST' })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {
                        alert(data.message);
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                        alert('启动失败: ' + error.message);
                        statusText.innerText = "❌ 施法失败，可能出BUG了！";
                        setTimeout(() => {
                            progressPanel.style.display = "none";
                        }, 3000);
                    });
            });

            // 可视化按钮事件
            document.getElementById('visualize-btn').addEventListener('click', function() {
                window.location.href = this.dataset.link;
            });

            // 状态轮询
            function pollStatus() {
                if (!currentSpider) return;

                fetch('/api/status')
                    .then(response => response.json())
                    .then(data => {
                        const isRunning = data[currentSpider];

                        if (!isRunning) {
                            const popup = document.getElementById("completion-popup");
                            popup.innerText = `🎉 「${currentSpider}」爬虫完成啦！可以去查看报告了~`;
                            popup.style.display = "block";
                            setTimeout(() => popup.style.display = "none", 6000);

                            const progressPanel = document.getElementById("magic-panel");
                            const progressBar = document.getElementById("magic-bar");
                            const statusText = document.getElementById("magic-status-text");

                            progressBar.style.width = "100%";
                            statusText.innerText = "✨施法完成，可以查看报告啦！";

                            setTimeout(() => {
                                progressBar.style.width = "0%";
                                progressPanel.style.display = "none";
                            }, 3000);

                            clearInterval(fakeProgressInterval);
                            currentSpider = null;
                        }
                    });
            }

            setInterval(pollStatus, 5000);
            pollStatus();

            // 添加浮动效果
            document.addEventListener('mousemove', (e) => {
                const xPos = e.clientX / window.innerWidth;
                const yPos = e.clientY / window.innerHeight;
                const magicCircle = document.querySelector('.magic-circle');
                if (magicCircle) {
                    magicCircle.style.transform = `
                        rotate3d(${yPos * 2 - 1}, ${xPos * 2 - 1}, 0, ${xPos * 15}deg)
                        translateY(${Math.sin(Date.now()/1000)*10}px)
                    `;
                }
            });
        });
    </script>
    <!-- 魔法进度弹窗 -->
    <div id="magic-panel" style="
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(2,12,26,0.95);
      padding: 30px 40px;
      border-radius: 15px;
      box-shadow: 0 0 20px #29b6f6;
      z-index: 9999;
      text-align: center;
      width: 400px;
    ">

      <div id="magic-status-text" style="
        font-size: 1.5rem;
        color: #4fc3f7;
        margin-bottom: 20px;
        text-shadow: 0 0 8px #1e88e5;
      ">正在施法中...</div>

      <div style="
        width: 100%;
        height: 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #4fc3f7;
      ">
        <div id="magic-bar" style="
          height: 100%;
          width: 0%;
          background: linear-gradient(90deg, #4fc3f7, #1e88e5);
          transition: width 0.3s ease;
        "></div>
      </div>
    </div>

    <!-- 弹窗提示 -->
    <div id="completion-popup" style="
        display: none;
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: rgba(2,12,26,0.9);
        color: white;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 15px #29b6f6;
        z-index: 9999;
    ">
        🎉 爬虫完成啦！可以去查看报告了~
    </div>

</body>
</html>